<template>
	<view class="popup" :class="{'mask':props.mask}" @click="close()">
		<view class="box " :class="mode" :style='getRound()' @click.stop="">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { defineProps, watchEffect, defineEmits } from 'vue'
	const emit = defineEmits(['close'])
	const props = defineProps({
		mask: {
			default: true,
			type: Boolean
		},
		mode: {
			default: 'center',
			type: String
		},
		round: {
			default: '0rpx',
			type: String
		}
	})

	const getRound = () => {
		console.log(11)
		if (props.mode == 'center') {
			return `border-radius: ${props.round};`
		}
		if(props.mode=='top'){
			return `border-bottom-left-radius:${props.round};border-bottom-right-radius:${props.round};`
		}
		
		if(props.mode=='bottom'){
			return `border-top-left-radius:${props.round};border-top-right-radius:${props.round};`
		}
	}
	const close = () => {
		emit('close')
	}
</script>

<style scoped>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99998;
	}

	.mask {
		background: rgba(0, 0, 0, 0.3);
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		background-color: #fff;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.center {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
		animation: center-ani 0.3s forwards;
	}

	.top {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		animation: top-ani 0.3s forwards;
	}

	.bottom {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		animation: bottom-ani 0.3s forwards;
	}

	@keyframes center-ani {
		0% {
			transform: translate(-50%, -50%) scale(0.5);
			opacity: 0;
		}

		100% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	}



	@keyframes bottom-ani {
		0% {
			transform: translateY(200px);
			opacity: 0;
		}

		100% {
			transform: translateY(0) scale(1);
			opacity: 1;
		}
	}
	

	@keyframes top-ani {
		0% {
			transform: translateY(-200px);
			opacity: 0;
		}

		100% {
			transform: translateY(0) scale(1);
			opacity: 1;
		}
	}
</style>